<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 网格布局示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--color-background-secondary);
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
    }
    
    .section {
      background: var(--color-comp-background-primary);
      border-radius: calc(12 * var(--unit));
      padding: calc(24 * var(--unit));
      margin-bottom: calc(24 * var(--unit));
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .section-title {
      font-size: var(--font-size-title-medium);
      font-weight: var(--font-weight-title);
      color: var(--color-font-primary);
      margin-bottom: calc(16 * var(--unit));
    }
    
    .grid-item {
      background: var(--color-brand10);
      border: 1px solid var(--color-brand20);
      border-radius: calc(8 * var(--unit));
      padding: calc(16 * var(--unit));
      text-align: center;
      color: var(--color-font-primary);
      min-height: calc(60 * var(--unit));
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title title-large">网格布局示例</h1>
    
    <!-- 基础网格 -->
    <div class="example-section">
      <h2 class="example-section-title">基础网格布局（12列）</h2>
      <div class="grid">
        <div class="grid-item col-12">12列（全宽）</div>
        <div class="grid-item col-6">6列（50%）</div>
        <div class="grid-item col-6">6列（50%）</div>
        <div class="grid-item col-4">4列（33%）</div>
        <div class="grid-item col-4">4列（33%）</div>
        <div class="grid-item col-4">4列（33%）</div>
        <div class="grid-item col-3">3列（25%）</div>
        <div class="grid-item col-3">3列（25%）</div>
        <div class="grid-item col-3">3列（25%）</div>
        <div class="grid-item col-3">3列（25%）</div>
        <div class="grid-item col-2">2列</div>
        <div class="grid-item col-2">2列</div>
        <div class="grid-item col-2">2列</div>
        <div class="grid-item col-2">2列</div>
        <div class="grid-item col-2">2列</div>
        <div class="grid-item col-2">2列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
        <div class="grid-item col-1">1列</div>
      </div>
    </div>
    
    <!-- 响应式网格 -->
    <div class="example-section">
      <h2 class="example-section-title">响应式网格</h2>
      <p class="text mb-medium">在不同屏幕尺寸下自动调整列数：大屏12列，中屏8列，小屏4列，超小屏2列</p>
      <div class="grid">
        <div class="grid-item col-12 col-8 col-4 col-2">响应式项目</div>
        <div class="grid-item col-12 col-8 col-4 col-2">响应式项目</div>
        <div class="grid-item col-12 col-8 col-4 col-2">响应式项目</div>
        <div class="grid-item col-12 col-8 col-4 col-2">响应式项目</div>
      </div>
    </div>
    
    <!-- 网格间距 -->
    <div class="example-section">
      <h2 class="example-section-title">网格间距</h2>
      
      <h3 class="title title-sub-medium mb-medium">无间距</h3>
      <div class="grid grid-gap-none">
        <div class="grid-item col-4">项目 1</div>
        <div class="grid-item col-4">项目 2</div>
        <div class="grid-item col-4">项目 3</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">小间距</h3>
      <div class="grid grid-gap-small">
        <div class="grid-item col-4">项目 1</div>
        <div class="grid-item col-4">项目 2</div>
        <div class="grid-item col-4">项目 3</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">默认间距</h3>
      <div class="grid grid-gap-medium">
        <div class="grid-item col-4">项目 1</div>
        <div class="grid-item col-4">项目 2</div>
        <div class="grid-item col-4">项目 3</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">大间距</h3>
      <div class="grid grid-gap-large">
        <div class="grid-item col-4">项目 1</div>
        <div class="grid-item col-4">项目 2</div>
        <div class="grid-item col-4">项目 3</div>
      </div>
    </div>
    
    <!-- 分栏布局 -->
    <div class="example-section">
      <h2 class="example-section-title">分栏布局</h2>
      
      <h3 class="title title-sub-medium mb-medium">两栏布局（4:6）</h3>
      <div class="grid grid-two-columns">
        <div class="grid-item">左侧内容（40%）</div>
        <div class="grid-item">右侧内容（60%）</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">两栏等分布局（5:5）</h3>
      <div class="grid grid-two-columns-equal">
        <div class="grid-item">左侧内容（50%）</div>
        <div class="grid-item">右侧内容（50%）</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">两栏反向布局（6:4）</h3>
      <div class="grid grid-two-columns-reverse">
        <div class="grid-item">左侧内容（60%）</div>
        <div class="grid-item">右侧内容（40%）</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">三栏布局</h3>
      <div class="grid grid-three-columns">
        <div class="grid-item">栏 1</div>
        <div class="grid-item">栏 2</div>
        <div class="grid-item">栏 3</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">四栏布局</h3>
      <div class="grid grid-four-columns">
        <div class="grid-item">栏 1</div>
        <div class="grid-item">栏 2</div>
        <div class="grid-item">栏 3</div>
        <div class="grid-item">栏 4</div>
      </div>
    </div>
    
    <!-- 网格对齐 -->
    <div class="example-section">
      <h2 class="example-section-title">网格对齐方式</h2>
      
      <h3 class="title title-sub-medium mb-medium">顶部对齐</h3>
      <div class="grid grid-align-start grid-demo">
        <div class="grid-item col-4">项目 1</div>
        <div class="grid-item col-4">项目 2<br>多行内容</div>
        <div class="grid-item col-4">项目 3</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">居中对齐</h3>
      <div class="grid grid-align-center grid-demo">
        <div class="grid-item col-4">项目 1</div>
        <div class="grid-item col-4">项目 2<br>多行内容</div>
        <div class="grid-item col-4">项目 3</div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">底部对齐</h3>
      <div class="grid grid-align-end grid-demo">
        <div class="grid-item col-4">项目 1</div>
        <div class="grid-item col-4">项目 2<br>多行内容</div>
        <div class="grid-item col-4">项目 3</div>
      </div>
    </div>
  </div>
</body>
</html>

